<script setup>
import router from "@/router/index.js";
import {Lock, User} from "@element-plus/icons-vue";
import {ref} from "vue";
import {forgetPasswordConfirmService} from "@/api/auth.js";
import {ElMessage} from "element-plus";

const user = JSON.parse(localStorage.getItem("user"))

const form = ref({
  name: user.name,
  account: user.username,
  password: '',
  confirmPassword: ''
})

const validatePass = (rule, value, callback) => {
  if (value !== form.value.password) {
    callback(new Error('两次输入密码不一致'))
  } else {
    callback()
  }
}

const rules = {
  password: [
    {required: true, message: '密码不能为空', trigger: 'blur'},
    {min: 8, max: 16, message: '密码长度应在 8 ~ 16 位之间', trigger: 'blur'}
  ],
  newPassword: [
    {required: true, message: '请再次输入密码', trigger: 'blur'},
    {min: 8, max: 16, message: '密码长度应在 8 ~ 16 位之间', trigger: 'blur'},
    {validator: validatePass, trigger: 'blur'}
  ]
}

const formRef = ref();

const handleForgetConfirmPassword = async () => {
  try {
    const valid = await formRef.value.validate()
    if (valid) {
      const res = await forgetPasswordConfirmService(form.value)

      if (res.data.code === '200') {
        localStorage.clear()
        ElMessage.success("重置成功")
        void router.push('/login')
      } else {
        ElMessage.error(res.data.message)
      }
    }
  } catch (error) {
    ElMessage.error('请填写完整信息')
  }
}

</script>

<template>
  <div class="container">
    <div class="header">
      <div class="header-left">
        <div class="header-left-logo" style="cursor: pointer" @click="router.push('/login')">
          <img src="../assets/logo-2.png" alt="图像无法加载" style="width: 40px; height: 40px"/>
          <span>Nova Admin</span>
        </div>
      </div>
      <div class="header-right">
        <div class="header-right-operate">
          <span class="header-right-operate-item" style="cursor: pointer; margin-right: 20px"
                @click="router.push('/login')">登 录</span>
          <span class="header-right-operate-item" @click="router.push('/register')">注 册</span>
        </div>
      </div>
    </div>

    <div class="main">
      <div class="main-content">
        <div class="main-content-logo">
          <img src="../assets/logo.jpg" alt="图像无法加载"/>
        </div>
        <div class="main-content-main">
          <span>重置密码</span>
        </div>
        <div style="margin-top: 10px; text-align: center; color: #7C7C7C">
          请通过输入 Nova Admin 用户名 / 手机号 / 邮箱重置你的用户密码
        </div>
        <div class="main-content-form">
          <el-form ref="formRef" :model="form" :rules="rules">
            <el-form-item>
              <el-input disabled v-model="form.name" style="width: 300px;height: 40px">
                <template #prefix>
                  <el-icon size="18">
                    <User/>
                  </el-icon>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input show-password type="password" v-model="form.password" placeholder="新密码"
                        style="width: 300px;height: 40px ;margin-top: 10px">
                <template #prefix>
                  <el-icon size="18">
                    <Lock/>
                  </el-icon>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item prop="newPassword">
              <el-input show-password type="password" v-model="form.newPassword" placeholder="确认密码"
                        style="width: 300px;height: 40px ;margin-top: 10px">
                <template #prefix>
                  <el-icon size="18">
                    <Lock/>
                  </el-icon>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-button style="width: 100%;margin-top: 10px ;font-size: 18px; height: 40px" type="primary"
                         @click="handleForgetConfirmPassword">重置密码
              </el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>

    </div>

    <div class="footer">

    </div>
  </div>
</template>

<style scoped lang="scss">
.container {
  height: 100vh;

  .header {
    height: 60px;
    background-color: #303643;
    display: flex;
    justify-content: space-between;

    .header-left {
      width: 200px;

      .header-left-logo {
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;

        span {
          color: #FFFFFF;
          font-size: 20px;
          margin-left: 10px;
          font-weight: bold;
        }
      }
    }

    .header-right {
      width: 120px;

      .header-right-operate {
        color: #7C7C7C;
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;

        .header-right-operate-item {
          cursor: pointer;
        }

        .header-right-operate-item:hover {
          color: #c6c4c4;
        }
      }
    }
  }

  .main {
    display: flex;
    height: 550px;
    background-color: #FFFFFF;
    justify-content: center;

    .main-content {
      margin-top: 50px;
      height: 350px;
      width: 500px;

      .main-content-logo {
        display: flex;
        justify-content: center;

        img {
          width: 80px;
          height: 80px;
        }
      }

      .main-content-main {
        margin-top: 20px;
        font-weight: bold;
        display: flex;
        justify-content: center;
        align-items: center;

        span {
          color: #40485B;;
          font-size: 30px;
        }

      }

      .main-content-form {
        margin-top: 40px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }
    }
  }

  //.footer {
  //  border: 1px solid red;
  //  min-height: 250px;
  //  background-color: #FBFBFB;
  //}
}
</style>